<template>
  <div class="home">
    <div class="columns">
      <div class="column is-one-fifth">
        <div class="center content-inputs" style="margin: 15px">
          <vs-input v-model="value" placeholder="登录享用搜索功能">
            <template #icon>
              <i class="bx bxs-search"></i>
            </template>
          </vs-input>
        </div>
      </div>
    </div>
    <br /><br />
    <div class="box">
      <h2 class="title"><img src="..\assets\logoNocolor.png" /></h2>
      <div style="padding: 1px"></div>
      <h6 class="subtitle is-6">需要登录才可以访问受限制页面</h6>
      <!-- <vue-recaptcha :sitekey="sitekey" @verify="onVerify"></vue-recaptcha> -->
      <vs-button
        gradient
        block
        @click="registerActive = !active"
        style="height: 40px; font-size: 16px"
        >注册</vs-button
      >
      <vs-button
        flat
        block
        @click="loginActive = !active"
        style="height: 40px; font-size: 16px"
        >登录</vs-button
      >
      <!-- .vs-dialog {
  min-width: 330px;
} -->
      <vs-dialog blur v-model="captureActive">
        <template #header>
          <h1 class="not-margin">
            <b>人机验证</b>
          </h1>
        </template>
        <vue-recaptcha :sitekey="sitekey" @verify="onVerify"></vue-recaptcha>
        <vs-button block @click="login"> 登录 </vs-button>
      </vs-dialog>
      <vs-dialog blur v-model="registerActive">
        <template #header>
          <h1 class="not-margin">
            <b>注册</b>
          </h1>
        </template>
        <vs-alert dark v-model="alertActive">
          <template #title> 无效的输入！ </template>
          {{ alertContent }}
        </vs-alert>
        <div class="con-form">
          <vs-input v-model="email" label-placeholder="邮箱地址">
            <template #icon> @ </template>
            <template v-if="!validEmail && email !== ''" #message-danger>
              无效的邮箱地址
            </template>
          </vs-input>
          <vs-input v-model="username" label-placeholder="用户名">
            <template #icon>
              <i class="bx bxs-user"></i>
            </template>
          </vs-input>
          <vs-input type="password" v-model="pass" label-placeholder="密码">
            <template #icon>
              <i class="bx bxs-lock"></i>
            </template>
          </vs-input>
          <vs-input v-model="invite" label-placeholder="邀请码（选填）">
            <template #icon>
              <i class="bx bx-barcode"></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="read">我已阅读社区须知。</vs-checkbox>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button block @click="register"> 注册 </vs-button>

            <div class="new">
              已有账号？ <input type="button" @click="loginOpen" value="登录" />
            </div>
          </div>
        </template>
      </vs-dialog>
      <vs-dialog blur v-model="loginActive">
        <template #header>
          <h1 class="not-margin">
            <b>登录</b>
          </h1>
        </template>
        <div class="con-form">
          <vs-input v-model="email" label-placeholder="邮箱地址">
            <template #icon> @ </template>
          </vs-input>
          <vs-input type="password" v-model="pass" label-placeholder="密码">
            <template #icon>
              <i class="bx bxs-lock"></i>
            </template>
          </vs-input>
          <div class="flex">
            <vs-checkbox v-model="remember">记住我</vs-checkbox>
          </div>
        </div>

        <template #footer>
          <div class="footer-dialog">
            <vs-button
              block
              @click="
                captureActive = true;
                loginActive = active;
              "
            >
              登录
            </vs-button>

            <div class="new">
              没有账号？
              <input type="button" @click="registerOpen" value="创建一个" />
            </div>
          </div>
        </template>
      </vs-dialog>
    </div>
  </div>
</template>
<script>
import VueRecaptcha from "vue-recaptcha";
import { sitekey } from "../config.json";

export default {
  name: "HomeSakura",
  components: {
    VueRecaptcha,
  },
  computed: {
    validEmail() {
      return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(this.email);
    },
  },
  data() {
    return {
      // active: false,
      // triggers: ["hover"],
      // pagenum: null,
      captureActive: false,
      email: "",
      pass: "",
      username: "",
      invite: "",
      VerRes: "",
      sitekey: sitekey,
      registerActive: false,
      loginActive: false,
      remember: false,
      read: false,
      alertActive: false,
      alertContent: [
        {
          id: 1,
          show: false,
          content: "无效的邮箱地址。",
        },
        {
          id: 2,
          show: false,
          content: "无效的用户名。",
        },
        {
          id: 3,
          show: false,
          content: "无效的密码。",
        },
      ],
    };
  },
  methods: {
    registerOpen() {
      this.loginActive = false;
      this.email = "";
      this.pass = "";
      this.username = "";
      this.invite = "";
      this.registerActive = true;
    },
    loginOpen() {
      this.registerActive = false;
      this.email = "";
      this.pass = "";
      this.username = "";
      this.invite = "";
      this.loginActive = true;
    },
    onVerify: function (response) {
      this.VerRes = response;
      console.log("Verify: " + response);
      this.login();
    },
    //登录函数
    async login() {
      if (this.email == "") {
        //nothing happens here
      }
      if (this.VerRes == "") {
        // return this.$buefy.dialog.alert("你还没有点验证码！");
      }
      let res = await this.$http.post("/go/login/auth", {
        email: this.email,
        password: this.pass,
      });
      if (res.data.status == 20000) {
        localStorage.setItem("email", this.email);
        localStorage.setItem("token", res.data.access_token);
        localStorage.setItem("level", res.data.level);
        localStorage.setItem("uid", res.data.uid);
        this.$router.push("/AllGallery");
      } else {
        this.$vs.notification({
          duration: "3000",
          progress: "auto",
          title: "登陆失败！",
          text: "检查登陆凭据",
        });
      }
      this.captureActive = false;

      //console.log(await localStorage.getItem("email"));
    },
    //注册函数
    async register() {
      if (this.email == "") {
        this.alertContent[0].show = true;
      }
      if (this.username == "") {
        this.alertContent[1].show = true;
      }
      if (this.password == "") {
        this.alertContent[0].show = true;
      }
      if (this.VerRes == "") {
        // return this.$buefy.dialog.alert("你还没有点验证码！");
      }
      let res = await this.$http.post("/go/login/reg", {
        email: this.email,
        password: this.pass,
        invite: this.invite,
        username: this.username,
      });
      if (res.data.status == 20000) {
        this.$vs.notification({
          duration: "3000",
          progress: "auto",
          title: "注册成功！",
          text: "即将转到登录界面。",
        });
        this.loginOpen();
      }
      if (res.data.status == 40000) {
        this.$vs.notification({
          duration: "3000",
          progress: "auto",
          title: "注册失败!",
          text: "注册失败,邮箱已被占用",
        });
      }
    },
  },
};
</script>
<style scoped>
/* 这里是局部 Style */
.home {
  background: url("../assets/epitaph.jpg") no-repeat;
  background-size: cover;
  /* display: flex; */
  min-height: calc(100vh);
  overflow: hidden;
}

.box {
  width: 400px;
  margin: auto;
  text-align: center;
  background-color: #ffffffd0;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  display: block;
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #303030;
  border-radius: 5px;
}
</style>
<style>
/* 这里是全局 Style vuesax 的 css style 必须放到全局 style 中 */
.not-margin {
  margin: 0px;
  font-weight: normal;
  padding: 5px;
}

.con-form {
  width: 100%;
}

.con-form .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.con-form .flex a {
  font-size: 8px;
  opacity: 0.7;
}

.con-form .flex a :hover {
  opacity: 1;
}

.vs-checkbox-label {
  font-size: 8rem;
}

.vs-input-content {
  margin: 10px 0px;
  width: calc(100%);
}

.vs-input-content .vs-input {
  width: 100%;
}

.footer-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: calc(100%);
}

.footer-dialog .new {
  margin: 0px;
  margin-top: 5px;
  padding: 0px;
  font-size: 8px;
}

.footer-dialog .new input {
  margin-left: 6px;
  background-color: transparent;
  border: 0px;
  color: #195bff;
  font-size: 8px;
}

.footer-dialog .new input:hover {
  color: black;
}

.vs-button {
  margin: 10px 0px;
}

.vs-dialog {
  min-width: 330px;
}
</style>